<template>
  <view class="x-groups-modal-content">
    <view class="_cancel">
      <x-icon name="icon-025" color="#fff" size="50" />
    </view>
    <template v-if="isPrimaryPage">
      <view class="_content _three">
        <view class="_h1">恭喜您!</view>
        <view class="_h2">
          获得一张优惠券
        </view>
        <view class="_h3">
          “现在下单，<view class="breathe-in">立享</view>优惠”
        </view>
        <view class="_button">
          <text class="_text">点击收下优惠券</text>
        </view>
        <view class="_h4 breathe-in">买完立刻恢复原价 仅剩19个名额</view>
      </view>
    </template>
    <template v-else-if="detail.moduleData.popupStyle === 2">
      <view class="_content _two">
        <view class="_h4">立减{{ detail.couponAmount }}元</view>
        <view class="_h1">仅限今日</view>
        <view class="_h3">
          最后19单
          <text class="_text">每人限下1单</text>
        </view>
        <view class="_button">
          <text class="_text">立减{{ detail.couponAmount }}元</text>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="_content">
        <view class="_h1">恭喜您!</view>
        <view class="_h2">
          获得一张
          <text class="_text">{{ detail.couponAmount }}元</text>
          优惠券
        </view>
        <view class="_h3">
          现在下单
          <text class="_text">{{ detail.productShortName || '' }}</text>
        </view>
        <view class="_h4">到手仅需{{ detail.preferentialPrice }}元</view>
        <view class="_button">
          <text class="_text">点击收下优惠券</text>
        </view>
      </view>
    </template>
    <x-countdown :time="30000" auto @finish="handleTimeFinish" @change="handleCountdownChange">
      <view class="_countdown">
        <view class="_tips">30秒后失效</view>
        <view v-if="countdownData" class="_second">00:{{ countdownData.second }}.</view>
        <view class="_millisecond">
          <view class="_millisecond-list">
            <text v-for="item in numberList" :key="item" class="_text">{{item}}</text>
          </view>
        </view>
      </view>
    </x-countdown>
  </view>
</template>

<script>
import XCountdown from '@/components/x-countdown';
import XIcon from '@/components/x-icon';

export default {
  name: 'XGroupsModalContent',
  components: {
    XCountdown,
    XIcon
  },
  props: {
    detail: {
      type: Object,
      default: () => null
    },
    isPrimaryPage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      countdownData: null,
      numberList: [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
    };
  },
  computed: {},
  watch: {},
  created() {

  },
  methods: {
    handleTimeFinish() {
      this.$emit('finish');
    },
    // 倒计时更新
    handleCountdownChange(res) {
      this.countdownData = res;
    }
  }
};
</script>

<style lang="scss" scoped>
.x-groups-modal-content{
  width: 600px; margin: 0 auto;
  .breathe-in{ animation: breathe 1s infinite forwards; padding: 0 5px;}
  ._cancel{ text-align: right; padding-bottom: 20px;}
  ._content{
    width: 610px; background-color: #FEEA11; line-height: 1.4; font-weight: bold; padding: 30px; display: flex; flex-direction: column; justify-content: center; text-align: center;
    text-shadow: stroke(3px);
    ._h1{ font-size: 130px; color: #E50808; font-weight: 900;}
    ._h2{
      font-size: 48px; color: #080736; font-weight: 700;
      ._text{ font-size: 70px; color: #E50808; padding: 0 5px;}
    }
    ._h3{
      color: #080736; font-size: 40px;
      ._text{ color: #273EDD; font-size: 50px; padding: 0 5px;}
    }
    ._h4{ color: #E50808; font-size: 64px;}
    ._button{
      padding: 16px 0;
      ._text{
        display: inline-block; background: linear-gradient(180deg, #FFB800 0%, #FC1212 100%); border-radius: 30px; padding: 10px 30px; font-size: 40px; font-style: italic; color: #fff;
        text-shadow: stroke(2px, #000);
      }
    }

    &._two{
      ._h4{ color: #FE0511; font-size: 70px;}
      ._h1{ color: #FE0511;}
      ._h3,
      ._h3 ._text{ color: #FE0511; font-size: 50px;}
      ._h3 ._text{ color: #1A41E4; padding-left: 30px;}
      ._button ._text{ min-width: 300px; padding: 10px 50px; border: 2px solid #FB2C2C; font-size: 50px; background: linear-gradient(180deg, #FFF500 0%, #FC1212 100%); text-shadow: stroke(2px, #666);}
    }

    &._three{
      ._h1{ font-size: 100px;}
      ._h2{ font-size: 60px;}
      ._h3{ font-size: 42px; display: flex; align-items: center; justify-content: center; text-align: center;}
      ._h4{ font-size: 28px; color: #fff; text-shadow: stroke(2px, #000);}
      ._button{
        padding: 16px 0;
        ._text{ font-size: 50px; border: 4px solid #FC1212;}
      }
    }
  }
  ._countdown{
    display: flex; padding: 30px 0; color: #fff; justify-content: center; font-size: 36px; line-height: 1; overflow: hidden;
    ._tips{ padding-right: 20px;}
    ._millisecond,
    ._second{ color: #FFE401;}
    ._millisecond{
      overflow: hidden; height: 1em;
      ._millisecond-list{
        animation: frames 1s steps(10) infinite;
      }
      ._text{ display: block; overflow: hidden;}
    }
  }
}

@keyframes frames {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10em);
  }
}

@keyframes breathe {
  0% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
</style>
